<!-- 检测管理 -->
<template>
	<view>
		<view class="no-warpper">
		<u-collapse ref="collapse" :accordion="accordion">
			<u-collapse-item :title="item.siteName" v-for="(item,index) in nucleicSiteList" :key="index">
				<view class="list">
					<view class="item" v-for="(item2,index2) in item.siteUnitList" :key="index2">
						<view class="lable">{{item2.floorName}}-{{item2.unitNum}}</view>
						<view class="button-mini green m8">
							<button @click="saveNucleicQueue(item2)">加入队列</button>
						</view>
					</view>
				</view>
				<view class="button-mini m8 look-queue">
					<button @click="lookQueue(item.siteId)">查看队列</button>
				</view>
			</u-collapse-item>
		</u-collapse>
		</view>
		
		<u-toast ref="uToast" />
		<u-modal v-model="addShow" @confirm="addConfirm" ref="uModal" :title="addContent" show-cancel-button>
			<view class="nl-flex-list">
				<text class="nl-margin-right">呼叫范围</text>
				<u-input class="input" v-model="callLayerNum" type="number" placeholder="请输入每次呼叫楼层数" />
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		queryNucleicSite,
		queryNucleicSiteUnit,
		saveNucleicQueue
	} from '@/api/nucleic.js';
	import goToUrl from '@/common/goToUrl.js'
	export default {
		data() {
			return {
				accordion:false,
				nucleicSiteList:[],	// 检测点列表
				
				item:{},
				addShow:'',
				addContent:'',
				callLayerNum:'',
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onLoad(option) {
			this.queryNucleicSite()
		},
		methods: {
			/**
			 * 获取检测点列表
			 */
			queryNucleicSite() {
				let self = this
				let params = {
					page: 1,
					row: 99,
					communityId: this.userCommunity.communityId
				}
				queryNucleicSite(params).then((res) => {
					if (res.code == 0) {
						this.nucleicSiteList = res.data
						for (let item of this.nucleicSiteList) {
							self.queryNucleicSiteUnit(item)
						}
					}
				}).catch(function(reason) {

				})
			},
			/**
			 * 获取检测点覆盖的楼栋单元
			 */
			queryNucleicSiteUnit(item) {
				let params = {
					page: 1,
					row: 99,
					communityId: this.userCommunity.communityId,
					siteId: item.siteId
				}
				queryNucleicSiteUnit(params).then((res) => {
					if (res.code == 0) {
						item['siteUnitList'] = res.data
					}
					this.$nextTick(() => {
						this.$refs.collapse.init()
					})
					this.$forceUpdate()
				}).catch(function(reason) {
			
				})
			},
			/**
			 * 加入队列
			 */
			saveNucleicQueue(item){
				let self = this
				self.item = item
				self.addShow = true
				self.addContent = `${item.floorName}-${item.unitNum} 单元`
			},
			addConfirm(){
				let self = this
				
				if (!self.callLayerNum) {
					uni.showToast({
						title: "请输入呼叫范围",
						icon: "none",
					})
					return
				}
				
				self.$refs.uToast.show({
					title: '加入队列中，请稍等',
					type: 'default',
					icon: false
				})
				
				let parmas = {
					communityId:self.item.communityId,
					siteId:self.item.siteId,
					siteUnitId:self.item.siteUnitId,
					unitId:self.item.unitId,
					callLayerNum:self.callLayerNum,
				}
				
				saveNucleicQueue(parmas).then((res)=>{
					if(res.code == 0){
						self.$refs.uToast.show({
							title: '加入队列成功',
							type: 'success',
						})
						
						item.siteUnitList = []
						self.queryNucleicSiteUnit(item)
					}else if(res.code == 404){
						self.$refs.uToast.show({
							title: res.msg,
							type: 'default',
							icon: false
						})
					}else{
						self.$refs.uToast.show({
							title: '加入队列失败',
							type: 'error',
						})
					}
					
				}).catch(function(reason){
					this.$refs.uToast.show({
						title: '加入队列失败',
						type: 'error',
					})
				})
			},
			/**
			 * 查看队列
			 */
			lookQueue(siteId){
				goToUrl(`/pages/nucleic/lookQueue/lookQueue?siteId=${siteId}`)
			},
		}
	}
</script>

<style lang="scss">
	.u-collapse-item{
		box-shadow: 0 2rpx 20rpx rgba(194, 194, 194, 0.2);
		background-color: #ffffff;
		border-radius: 8rpx;
		margin-bottom: 46rpx;
		overflow: hidden;
		position: relative;
		
		.u-collapse-title{
			padding-left: 24rpx;
			height: 40rpx;
			line-height: 46rpx;
		}
		.list{
			padding: 24rpx;
			border-top: 1px solid #F5F6FA;
		}
		.item{
			width: 100%;
			padding:12rpx 24rpx;
			border: 4rpx solid #e0e0e0;
			border-radius: 8rpx;
			margin-bottom: 32rpx;
			display: flex;
			align-items: center;
			
			.button-mini{
				margin-left: auto;
			}
			
			.lable{
				color: #414141;
			}
		}
	
		.item:last-child{
			margin-bottom: 0;
		}
		
		.look-queue{
			position: absolute;
			z-index: 2;
			right: 24rpx;
			right: 100rpx;
			top: 16rpx;
			background-color: #FFFFFF;
			button{
				color: $nl-color-main;
			}
		}
	}
	
</style>
